<template>
  <div>
    <el-drawer
      :title="dialogAttr.title"
      :visible.sync="isOpen"
      direction="rtl"
      size="50%"
      append-to-body
      :before-close="handleClose"
    >
      <el-button type="primary" plain class="bindBtn" @click="handleUnBindCourseList">绑定课程</el-button>
      <el-button icon="el-icon-refresh" plain class="bindBtn" @click="reFrush" />
      <el-table v-loading="loading" :data="courseList">
        <el-table-column
          label="课程标题"
          width="100"
          align="center"
          prop="courseTitle"
          :show-overflow-tooltip="true"
        />
        <el-table-column
          label="课程封面"
          align="center"
          prop="courseCover"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <el-image
              class="courseImg"
              :src="scope.row.courseCover"
              :preview-src-list="[scope.row.courseCover]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="结课时间" align="center" prop="courseEndDate" width="150">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.courseEndDate, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否开课" align="center" prop="courseIsBegin">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.course_is_begin" :value="scope.row.courseIsBegin" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleCourseRemove(scope.row)"
            >解绑</el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-view"
              @click="handleCourseInfo(scope.row)"
            >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>
    <!-- 详情 -->
    <course-info :visible.sync="courseInfo.show" :courseData="courseInfo.data" />
  </div>
</template>

<script>
import CourseInfo from "./courseInfo.vue";
export default {
  name: "BindCourseList",
  dicts: ["course_is_begin"],
  components: {
    CourseInfo
  },
  props: {
    bindId: {
      type: Object,
      default: () => {
        return {
          type: "str",
          value: 0
        };
      }
    },
    // 已绑定课程列表
    getBindCourseList: {
      type: Function,
      default: () => {}
    },
    // 解绑课程
    removeBindCourse: {
      type: Function,
      default: () => {}
    },
    // 弹框属性
    dialogAttr: {
      type: Object,
      default: () => {
        return {
          title: "",
          show: false
        };
      }
    }
  },
  data() {
    return {
      // 课程查询条件
      bindCourseQuery: {},
      // 课程列表
      courseList: [],
      // loading
      loading: false,
      // 详情
      courseInfo: {
        show: false,
        data: {}
      }
    };
  },
  methods: {
    /** 搜索已绑定的课程 */
    getCourseList() {
      this.loading = true;
      this.getBindCourseList(this.bindCourseQuery)
        .then(res => {
          this.courseList = res.data;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 课程解绑 */
    handleCourseRemove(row) {
      this.loading = true;
      this.removeBindCourse({ ids: [row.id] })
        .then(res => {
          this.$modal.msgSuccess("解绑成功");
          this.getCourseList(row.planId);
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 刷新 */
    reFrush() {
      this.getCourseList();
    },
    /** 打开绑定课程弹框 */
    handleUnBindCourseList() {
      this.$emit("openUnBindList");
    },
    /** 关闭时的回调 */
    handleClose() {
      this.bindId.value = 0;
      this.dialogAttr.show = false;
    },
    /** 详情 */
    handleCourseInfo(row) {
      this.courseInfo.data = row;
      this.courseInfo.show = true;
    }
  },
  computed: {
    isOpen: {
      get() {
        return this.dialogAttr.show;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  watch: {
    bindId: {
      handler(val) {
        if (val.value != 0 && val.value != "0") {
          let idType = val.type;
          this.bindCourseQuery[idType] = val.value;
          this.getCourseList();
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style scoped>
.bindBtn {
  margin-left: 10px;
  margin-bottom: 10px;
}
.courseImg {
  display: block;
  margin: auto;
  width: 120px;
  height: 60px;
}
</style>